import React, { Children, Component } from 'react'

export default class Parent extends Component {
  state = {
    hasError: ''
  }

  // 从错误获取衍生状态
  static getDerivedStateFromError(error) {
    console.log(11, error);
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    // 统计错误次数,返回给后端人员
    console.log('出错');
  }

  render() {
    return (
      <div>
        <h2>父亲组件</h2>
        {this.state.hasError ? <h2>网络状况较差,请稍后再试</h2> : <Child />}
      </div>
    )
  }
}

class Child extends Component {
  state = {
    // list: [
    //   { id: 1, name: 'mal', age: 18 },
    //   { id: 2, name: 'mal', age: 18 },
    //   { id: 3, name: 'mal', age: 18 },
    // ]
    list: 'aaa'
  }
  render() {
    return (
      <div>
        <h2>儿子组件</h2>
        {this.state.list.map(item => {
          return <li key={item.id}>{item.name + item.age}</li>
        })}
      </div>
    )
  }
}